<template>
  <!-- 进度 -->
  <div class="go_ranking progress">
    <!-- 标题与数值 -->
    <div class="progress_title">
      <span class="progress_title_left">{{ $t('ranking.progresso') }}</span>
      <span class="progress_title_right">{{ apo.user.currency_symbol }} {{
        apo.utils.formatAmount(activityData.team_recharge || 0) }}/{{
          apo.utils.formatAmount(activityData.recharge_cond || 0) }}</span>
    </div>
    <!-- 进度条 -->
    <div class="progress_bar">
      <div class="progress_bar_inner" :style="`width: ${propgress}%;`"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 属性声明
const props = defineProps(['activityData'])

// 进度百分比（0-100）
const propgress = computed(() => {
  if (!props.activityData.recharge_cond) return 0
  let pro = (props.activityData.team_recharge || 0) / (props.activityData.recharge_cond || 0) * 100
  if (pro > 100) pro = 100
  return pro
})

</script>

<style scoped lang="scss">
/* 外层容器 */
.go_ranking {
  height: 1.2rem;
  flex-shrink: 0;
  background: #fd66b1;
  border-radius: 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 0.4rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 进度态容器 */
.progress {
  background-color: #3f2e4b;
  flex-wrap: wrap;
  height: 1.6rem;
  padding: 0.16rem 0.4rem;
}

/* 标题行 */
.progress_title {
  display: flex;
  justify-content: space-between;
  width: 100%;

  .progress_title_left {
    color: #fff;
  }

  .progress_title_right {
    color: #FFBA00;
  }
}

/* 进度条样式 */
.progress_bar {
  width: 100%;
  height: 0.16rem;
  background-color: #2C1D31;
  border-radius: .2rem;

  .progress_bar_inner {
    height: 100%;
    background-color: #FFBA00;
    border-radius: .2rem;
    max-width: 100%;
  }
}
</style>
